<template>
  <cloudPage headerBG="#0952c3" :isLoading="detail == null">
    <cloudHeader slot="gHeader" background="#0952c3">
      <view class="grace-header-body" style="background:#0952c3;">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color:#fff;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color:#fff;"
        >
          {{ $t("otc.order.detail.title") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons" style="font-size:38rpx;"></view>
      </view>
    </cloudHeader>
    <view class="gbody main" v-if="detail != null">
      <view class="head-wrapper">
        <view class="status">
          <view class="s">
            <cloudIcon
              type="grace"
              name="icon-time2"
              class="icon"
              style="font-size:42rpx;margin-right:10rpx;"
              v-if="showPay"
            ></cloudIcon>
            <text class="v">{{ getTradeStatusText(detail.status) }}</text>
          </view>
          <view class="mt-10" v-if="showPay">
            {{$t('otc.order.detail.tips_payment')}}
          </view>
        </view>
        <view class="concat">
          <cloudIcon
            name="iconlianxikefu"
            class="icon"
            style="font-size:50rpx;"
          ></cloudIcon>
          <view class="mt-10">{{ $t("otc.order.detail.phone") }}</view>
        </view>
      </view>
      <view class="amount-wrapper">
        <text class="total">￥{{ detail.num | ceil(detail.price) }}</text>
        <view class="info">
          <view class="price">
            <view
              ><text class="label">{{ $t("otc.index.unit_price") }}</text
              ><text class="num">￥{{ parseFloat(detail.price) }}</text></view
            >
            <view
              ><text class="label">{{ $t("otc.index.count") }}</text
              ><text class="num"
                >{{ parseFloat(detail.num) }} {{ detail.coin }}</text
              ></view
            >
          </view>
          <view class="coin">
            <image
              class="coinLogo"
              :src="'/static/coin-images/' + detail.coin + '.png'"
            />
            <view>{{ detail.coin }}</view>
          </view>
        </view>
      </view>
      <view class="line" v-if="payment"></view>
      <view class="secrity-tip little-line" v-if="payment">
        {{
          $t("otc.order.detail.tips_transfer", {
            payment: paymentSelect[paymentIndex]
          })
        }}
      </view>
      <!-- 列表 -->
      <view class="transfer-info" v-if="payment">
        <view class="list">
          <view class="item little-line">
            <view class="left">
              <cloudIcon
                :name="
                  payment.bank == 'alipay'
                    ? 'iconzhifubao'
                    : payment.bank == 'wechat'
                    ? 'iconweixindenglu'
                    : 'iconyinlian'
                "
                style="font-size:46rpx;"
                :style="{
                  color:
                    payment.bank == 'alipay'
                      ? '#35b4fd'
                      : payment.bank == 'wechat'
                      ? '#44c900'
                      : ''
                }"
              ></cloudIcon>
              <text class="ml-10">{{ paymentSelect[paymentIndex] }}</text>
            </view>
            <view class="right" v-if="isWaitPay">
              <text class="change" @click="changePay()">
                {{ $t("otc.order.detail.switch_payment") }}
              </text>
            </view>
          </view>
          <view class="item little-line" v-if="isWaitPay">
            <view class="left">{{ $t("otc.order.detail.payee") }}</view>
            <view class="right">{{ payment.value.true_name }}</view>
          </view>
          <view v-if="payment.bank == 'bank'">
            <view class="item little-line">
              <view class="left">{{
                $t("otc.order.detail.bank_card_number")
              }}</view>
              <view class="right">{{ payment.value.account }}</view>
            </view>
            <view class="item little-line">
              <view class="left">{{
                $t("otc.order.detail.bank_account")
              }}</view>
              <view class="right">{{ payment.value.bank_name }}</view>
            </view>
            <view class="item">
              <view class="left">{{
                $t("otc.order.detail.account_opening_branch")
              }}</view>
              <view class="right">{{ payment.value.sub_bank_name }}</view>
            </view>
          </view>
          <view v-else>
            <view class="item little-line">
              <view class="left">{{
                $t("otc.order.detail.account_name")
              }}</view>
              <view class="right">{{ payment.value.account }}</view>
            </view>
            <view class="item little-line">
              <view class="left">{{
                $t("otc.order.detail.collection_code")
              }}</view>
              <view class="right" style="color:#0952c3;" @tap.stop="preview">
                {{ $t("otc.order.detail.click_to_view") }}
              </view>
            </view>
          </view>
          <view class="item" v-if="!isWaitPay">
            <view class="left">{{ $t("otc.order.detail.payer") }}</view>
            <view class="right">{{
              detail.buyer_user.user.certify_pass
                ? detail.buyer_user.user.certify_pass.name
                : "无"
            }}</view>
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="transfer-info">
        <view class="list">
          <view class="item little-line">
            <view class="left">{{ $t("otc.order.detail.orderno") }}</view>
            <view class="right">{{ detail.no }}</view>
          </view>
          <view class="item">
            <view class="left">{{ $t("otc.order.detail.ordertime") }}</view>
            <view class="right">{{
              detail.created_at | moment("YYYY-MM-DD HH:mm:ss")
            }}</view>
          </view>
        </view>
      </view>
      <view
        class="footer"
        v-if="
          showPay || showConfirm || showRepresentation || showComplainDetail
        "
      >
        <view class="safe-tip" v-if="showPay">
          {{ $t("otc.order.detail.tips_transfer2") }}
        </view>
        <view class="btns">
          <button class="appeal" @tap.stop="appeal" v-if="showRepresentation">
            {{ $t("otc.order.detail.submit_appeal") }}
          </button>
          <button
            class="appeal"
            @tap.stop="
              handleNavTo({ url: '/pages/otc/order/complaintDetail?id=' + id })
            "
            v-if="showComplainDetail"
          >
            {{ $t("otc.order.detail.complaint_detail") }}
          </button>
          <button
            class="pay"
            @tap.stop="submitPay"
            v-if="showPay"
            :loading="loading['otc.pay']"
          >
            {{ $t("otc.order.detail.successful_payment") }}
          </button>
          <button
            class="pay"
            @tap.stop="submitConfirm"
            v-if="showConfirm"
            :loading="loading['otc.confirm']"
          >
            {{ $t("otc.order.detail.money_received") }}
          </button>
        </view>
      </view>
      <cloudPayPassword
        :show="passwordShow"
        @close="togglePayPassword(false)"
        @keyboardDone="payPasswordDone"
      >
        <view slot="content" v-if="showPay">
          <view class="payDialog">
            <view class="mt-30">
              <view class="grace-flex grace-flex-center grace-flex-vbottom">
                <view class="font-28 color-b1"
                  >{{ $t("otc.order.detail.payment_amount") }}:</view
                >
                <view
                  class="font-60 color-b1 ml-20"
                  style="line-height: 60rpx;"
                  >{{ detail.num | ceil(detail.price) }}</view
                >
                <view class="font-30 color-b1 ml-20">
                  CNY
                </view>
              </view>
              <view class="mt-50 color-b2" style="text-align:center;">
                <text
                  >{{ $t("otc.order.detail.payment_method") }}:
                  {{ paymentSelect[paymentIndex] }}</text
                >
              </view>
            </view>
          </view>
        </view>
      </cloudPayPassword>
    </view>
  </cloudPage>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { getTradeStatusText } from "@/utils/otc";
import { ceil } from "lodash-es";
export default {
  data() {
    return {
      id: null,
      detail: null,
      paymentIndex: 0,
      passwordShow: false,
      toggleAction: ""
    };
  },
  filters: {
    ceil(arg1, arg2) {
      var m = 0;
      var s1 = arg1.toString();
      var s2 = arg2.toString();
      try {
        m += s1.split(".")[1].length;
      } catch (e) {}
      try {
        m += s2.split(".")[1].length;
      } catch (e) {}
      let allprice =
        (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
        Math.pow(10, m);
      return ceil(allprice, 2);
    }
  },
  computed: {
    ...mapState("user", ["user"]),
    // 当前支付方式
    payment() {
      if (this.isWaitPay) {
        let keys = Object.keys(this.detail.seller_user.user.enable_banks);
        return this.detail.seller_user.user.enable_banks[
          keys[this.paymentIndex]
        ];
      } else {
        return this.detail.bank;
      }
    },
    // 支付方式-选择
    paymentSelect() {
      let select = [];
      let keys = this.detail.seller_user.user.enable_banks;
      keys.forEach(item => {
        if (item.bank == "wechat") select.push(this.$t("common.title.wechat"));
        if (item.bank == "alipay") select.push(this.$t("common.title.alipay"));
        if (item.bank == "bank") select.push(this.$t("common.title.bank_card"));
      });
      return select;
    },
    // 显示“我已付款”
    showPay() {
      if (
        this.detail.buyer_id == this.user.id &&
        (this.detail.status == 0 || this.detail.status == 1)
      ) {
        return true;
      }
      return false;
    },
    // 显示“确认收款”
    showConfirm() {
      if (this.detail.seller_id == this.user.id && this.detail.status == 2) {
        return true;
      }
      return false;
    },
    // 显示“提交申诉”
    showRepresentation() {
      if (
        this.detail.status !== 8 &&
        this.detail.status !== 9 &&
        this.detail.status !== 10
      ) {
        return true;
      }
      return false;
    },
    // 显示查看申诉
    showComplainDetail() {
      if (this.detail.status == 8 || this.detail.status == 9) {
        return true;
      }
      return false;
    },
    // 是否待支付
    isWaitPay() {
      if (this.detail.status == 0 || this.detail.status == 1) {
        return true;
      }
      return false;
    }
  },
  async onLoad({ id }) {
    this.id = id;
    if (!this.user) await this.loadUser();
    this.loadDetail();
  },
  methods: {
    ...mapActions("user", ["loadUser"]),
    ...mapActions("otc", ["tradeDetail", "pay", "confirm"]),
    getTradeStatusText(status) {
      return getTradeStatusText(status, this);
    },
    async loadDetail() {
      this.detail = null;
      let data = await this.tradeDetail(this.id);
      this.detail = data;
      if (this.detail.bank != null) {
        var paymentIndex = 0;
        this.paymentSelect.forEach((item, index) => {
          if (
            item == this.$t("common.title.alipay") &&
            this.detail.bank.bank == "alipay"
          ) {
            paymentIndex = index;
          } else if (
            item == this.$t("common.title.wechat") &&
            this.detail.bank.bank == "wechat"
          ) {
            paymentIndex = index;
          } else if (
            item == this.$t("common.title.bank_card") &&
            this.detail.bank.bank == "bank"
          ) {
            paymentIndex = index;
          }
        });
        this.paymentIndex = paymentIndex;
      }
    },
    // 选择支付方式
    changePay() {
      uni.showActionSheet({
        itemList: this.paymentSelect,
        success: res => {
          this.paymentIndex = res.tapIndex;
        },
        fail: res => {}
      });
    },
    // 预览收款码
    preview() {
      uni.previewImage({
        current: 0,
        urls: [this.payment.value.url]
      });
    },
    togglePayPassword(show) {
      this.passwordShow = show;
    },
    // 确认支付
    submitPay() {
      this.toggleAction = "pay";
      this.passwordShow = true;
    },
    // 确认收款
    submitConfirm() {
      this.toggleAction = "confirm";
      this.passwordShow = true;
    },
    // 密码输入完成
    async payPasswordDone(params) {
      this.passwordShow = false;
      if (this.toggleAction == "pay") {
        let bank = {
          id: this.payment.id,
          bank: this.payment.bank,
          value: this.payment.value
        };
        await this.pay({
          tranId: this.id,
          pay_password: params.password,
          bank: bank
        });
        this.loadDetail();
        this.makeToast({ title: this.$t("common.tips.success") });
      } else if (this.toggleAction == "confirm") {
        await this.confirm({
          tranId: this.id,
          pay_password: params.password
        });
        this.loadDetail();
        this.makeToast({ title: this.$t("common.tips.success") });
      }
    },
    appeal() {
      this.handleNavTo({
        url: "/pages/otc/order/representations?id=" + this.id
      });
    }
  }
};
</script>

<style scoped>
page {
  background: #ffffff;
}
.little-line {
  position: relative;
}
.little-line:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
  transform: scaleY(0.5);
}
.line {
  width: 100%;
  height: 11px;
  background: #e9e9e9;
}
.icon {
  color: #ffffff;
}
.main {
  padding: 0rpx 0rpx 240rpx 0rpx;
}
.head-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #0952c3;
  font-size: 28rpx;
  padding: 100rpx 30rpx 40rpx 30rpx;
  color: #8b9faa;
  align-items: center;
}
.head-wrapper .status {
  font-size: 24rpx;
}
.head-wrapper .s {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.head-wrapper .v {
  font-size: 40rpx;
  color: #ffffff;
}
.head-wrapper .t {
  color: #ffffff;
}
.head-wrapper .concat {
  font-size: 24rpx;
}
.secrity-tip {
  padding: 20rpx 30rpx;
  font-size: 24rpx;
}
.amount-wrapper {
  padding: 30rpx 30rpx 30rpx 30rpx;
}
.amount-wrapper .total {
  display: block;
  color: #0952c3;
  padding: 20rpx 0 20rpx 0;
  font-weight: bold;
  font-size: 38rpx;
}
.amount-wrapper .info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.amount-wrapper .info .price {
  font-size: 28rpx;
}
.amount-wrapper .info .price view {
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}
.amount-wrapper .info .price .label {
  color: #8b9faa;
  padding-right: 30rpx;
}
.amount-wrapper .info .coin {
  font-size: 28rpx;
  text-align: center;
}
.amount-wrapper .info .coin image {
  width: 56rpx;
  height: 56rpx;
}
.transfer-info {
  padding: 0rpx 30rpx;
}
.transfer-info .change {
  color: #0952c3;
}
.list .item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30rpx 0 30rpx 0;
}
.list .item .left {
  font-size: 28rpx;
  display: flex;
  align-items: center;
}
.lise .item .right {
  font-size: 28rpx;
}
.footer {
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.footer .safe-tip {
  font-size: 24rpx;
  color: #0952c3;
  background: #e8f2fc;
  padding: 20rpx 30rpx;
}
.footer .btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}
.footer .appeal {
  width: 44%;
  font-size: 28rpx;
}
.footer .pay {
  width: 44%;
  border: 0px;
  background-color: #0952c3;
  color: #ffffff;
  font-size: 28rpx;
}
.payDialog {
  padding: 0rpx 44rpx;
}
</style>
